<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" onclick="AddEle1();" value="+">添加1
<input type="button" onclick="AddEle2();" value="+">添加2
<div id="i1">
    <p><input type="text"></p>
</div>

<script>
    function AddEle1(){
        //创建一个标签
        //将标签添加到i1里面
        var tag = "<p><input type='text'></p>";
        document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
    }
    function AddEle2(){
        //创建一个标签
        //将标签添加到i1里面
        var tag = document.createElement('input');
        tag.setAttribute('type','text');
        tag.style.fontSize = '16px';
        tag.style.backgroundColor = 'red';
        tag.color = 'white';
        var p = document.createElement('p');
        p.appendChild(tag);  //将input标签放到p标签中
        document.getElementById('i1').appendChild(p);
    }

</script>


</body>
</html>